<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row>
          <a-col :span="4">
            <a-form-item label="模具编码">
              <a-input
                style="width: 150px"
                allow-clear
                @blur="loadVersions()"
                @change="moldCodeChange()"
                placeholder="请输入模具编号"
                v-model="queryParam.moldCode"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="材料">
              <a-select style="width: 150px" placeholder="请选择材料" v-model="queryParam.material" allowClear>
                <a-select-option v-for="(item, index) in materials" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
              <!-- <a-input placeholder="请输入材料" v-model="queryParam.material"></a-input> -->
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="转益模的状态">
              <a-select
                style="width: 150px"
                placeholder="请选择状态"
                v-model="queryParam.transferBenefitModelStatus"
                allowClear
              >
                <a-select-option v-for="(item, index) in transferBenefitModelStatus" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
              <!-- <a-input placeholder="请输入材料" v-model="queryParam.material"></a-input> -->
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="版本">
              <a-select @focus="isVersions(queryParam.moldCode)" style="width: 150px" placeholder="请选择版本" v-model="queryParam.version" allowClear>
                <a-select-option v-for="(item, index) in versions" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
              <!-- <a-input placeholder="请输入材料" v-model="queryParam.material"></a-input> -->
            </a-form-item>
          </a-col>

          <a-col :span="4">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
      <a-button type="primary" icon="download" @click="handleExportXls('模具设计BOM表')">导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <!-- 高级查询区域 -->
      <j-super-query
        :fieldList="superFieldList"
        ref="superQueryModal"
        @handleSuperQuery="handleSuperQuery"
      ></j-super-query>

      <!-- 选择显示隐藏表头 -->
      <a-dropdown :trigger="['click']" style="margin-bottom: 10px" v-model="DropdownVisible">
        <a-menu slot="overlay">
          <a-menu-item v-for="(item, index) in columns" :key="index"
            ><a-checkbox
              :checked="item.show"
              @change="
                (e) => {
                  columnsCheck(e.target.checked, columns, index)
                }
              "
              >{{ item.title }}</a-checkbox
            ></a-menu-item
          >
        </a-menu>
        <a-button style="margin-left: 8px"> 筛选显示隐藏列 <a-icon type="down" /> </a-button>
      </a-dropdown>

      <!-- 规定显示隐藏的表头 -->
      <a-button style="margin-left: 8px" @click="btnShowHideBom"> {{ showHideBom }}</a-button>

      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <!-- <a style="margin-left: 24px" @click="onClearSelected">清空</a> -->
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: xWith,y:yHigh }"
        bordered
        rowKey="id"
        :columns="
          columns.filter((col, num) => {
            if (col.show) {
              return col
            }
          })
        "
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >

      <!-- 设计BOM-serialNumber-序号 -->
      <div slot="serialNumber" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>

        <!-- 设计BOM-partName-零件名 -->
        <div slot="partName" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>

         <!-- 设计BOM-chineseName中文名 -->
         <div slot="chineseName" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>
        <!-- 设计BOM-englishName英文名 -->
        <div slot="englishName" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>
        <!-- 设计BOM-零件规格 -->
        <div slot="partSpecification" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>
        <!-- 设计BOM-材料 -->
        <div slot="material" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>

        <!-- number-数量 -->
        <div slot="number" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>


        <!-- 设计BOM-备注 -->
        <div slot="remark" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>

        <!-- bom状态插槽 -->
        <template slot="bomStatus" slot-scope="text">
          <span v-if="text == '1'">新增</span>
          <span v-if="text == '2'">变更</span>
          <span v-if="text == '3'">取消</span>
        </template>

        <!-- 转益模的状态插槽 -->
        <template slot="transferBenefitModelStatus" slot-scope="text">
          <span v-if="text == '1'">未转</span>
          <span v-if="text == '2'">已转</span>
        </template>

        <!-- 是否删除的状态插槽 -->
        <template slot="isDelete" slot-scope="text">
          <a-tag v-if="text == '0'" color="blue">正常</a-tag>
          <a-tag v-if="text == '1'" color="orange">删除</a-tag>
          <!-- <span v-if="text == '0'">正常</span> -->
          <!-- <span v-if="text == '1'">删除</span> -->
          <!-- <span v-if="text == null">null</span> -->
        </template>

        <!-- 设计BOM-模具设计BOM主表id -->
        <div slot="chDesignBomMasterId" slot-scope="text">
          <span style="white-space: pre-line">
            {{ text }}
          </span>
        </div>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text, record">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
          <img
            v-else
            :src="getImgView(text)"
            :preview="record.id"
            height="25px"
            alt=""
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <!-- <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
                
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span> -->
      </a-table>
    </div>

    <ch-design-bom-modal ref="modalForm" @ok="modalFormOk"></ch-design-bom-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ChDesignBomModal from './modules/ChDesignBomModal'
import Template1 from '../jeecg/JVxeDemo/layout-demo/Template1.vue'
import { indexOf } from 'lodash'
import { axios } from '../../utils/request'
import { getAction } from '../../api/manage'

export default {
  name: 'ChDesignBomList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    ChDesignBomModal,
    Template1,
  },
  data() {
    return {
      xWith: '',
      yHigh: 700,
      description: '模具设计BOM表管理页面',
      // 材料搜索
      materials: [],
      // 版本搜索
      versions: [],
      //转益模
      transferBenefitModelStatus: [],
      defaultOptionsData: '',
      planForm: [],
      DropdownVisible: false, //选择checkbox后不收回菜单
      // 表头
      columns: [
        // {
        //   title: '#',
        //   dataIndex: '',
        //   key: 'rowIndex',
        //   width: 60,
        //   align: 'center',
        //   customRender: function (t, r, index) {
        //     return parseInt(index) + 1
        //   },
        //   show: true,
        // },
        {
          title: '序号',
          width: 60,
          align: 'center',
          dataIndex: 'serialNumber',
          scopedSlots: { customRender: 'serialNumber' },
          show: true,
        },
        {
          title: '零件名',
          width: 60,
          align: 'center',
          dataIndex: 'partName',
          scopedSlots: { customRender: 'partName' },
          show: true,
        },
        {
          title: '中文名',
          width: 80,
          align: 'center',
          dataIndex: 'chineseName',
          scopedSlots: { customRender: 'chineseName' },
          show: true,
        },
        {
          title: '英文名',
          width: 80,
          align: 'center',
          dataIndex: 'englishName',
          scopedSlots: { customRender: 'englishName' },
          show: true,
        },
        {
          title: '零件规格',
          width: 100,
          align: 'center',
          dataIndex: 'partSpecification',
          scopedSlots: { customRender: 'partSpecification' },
          show: true,
        },
        {
          title: '材料',
          width: 50,
          align: 'center',
          dataIndex: 'material',
          scopedSlots: { customRender: 'material' },
          show: true,
        },
        {
          title: '数量',
          width: 70,
          align: 'center',
          dataIndex: 'number',
          scopedSlots: { customRender: 'number' },
          show: true,
        },
        {
          title: '备注',
          width: 80,
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' },
          show: true,
        },
        {
          title: 'bom状态',
          width: 80,
          align: 'center',
          dataIndex: 'bomStatus',
          scopedSlots: { customRender: 'bomStatus' },
          show: true,
        },
        {
          title: '转益模的状态',
          width: 100,
          align: 'center',
          dataIndex: 'transferBenefitModelStatus',
          scopedSlots: { customRender: 'transferBenefitModelStatus' },
          show: true,
        },
        {
          title: '是否删除',
          width: 80,
          align: 'center',
          dataIndex: 'isDelete',
          scopedSlots: { customRender: 'isDelete' },
          show: true,
        },
        {
          title: '模具设计BOM主表id',
          width: 150,
          align: 'center',
          dataIndex: 'chDesignBomMasterId',
          scopedSlots: { customRender: 'chDesignBomMasterId' },
          show: true,
        },
      ],

      //请求的url
      url: {
        list: '/ch/chDesignBom/list',
        delete: '/ch/chDesignBom/delete',
        deleteBatch: '/ch/chDesignBom/deleteBatch',
        exportXlsUrl: '/ch/chDesignBom/exportXls',
        importExcelUrl: 'ch/chDesignBom/importExcel',

        // 更新路径
        pieceData: '/ch/chDesignBom/edit',
        //设计BOM获取版本集合
        queryVersions: '/ch/chDesignBom/queryVersions',
      },
      dictOptions: {},
      superFieldList: [],
    }
  },
  created() {
    // 计算表格的每列的宽度
    this.columns.map((x, i) => {
      if (x.width) {
        this.xWith = (this.xWith + x.width) * 1
      }
    })
    console.log('this.xWith', this.xWith)

    // 加载料号搜索值
    this.loadOptions()
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    //     // 版本
    //     loadVersions() {
    //   //查询版本(请求获取)
    //   console.log('this.queryParam.moldCode', this.queryParam.moldCode)
    //   if (this.queryParam.moldCode) {
    //     this.versions = []
    //     getAction(this.url.queryVersions,{
    //       moldCode:this.queryParam.moldCode
    //     }).then((res) => {
    //       if (res.code == 200) {
    //         if (res.result) {
    //           res.result.forEach((item) => {
    //             var obj = {}
    //             obj.value = item
    //             obj.text = item
    //             this.versions.push(obj)
    //           })
    //         }
    //         console.log('res111', res)
    //         console.log('this.versions', this.versions)
    //       } else {
    //         // this.$message.error(res.message)
    //         this.queryParam.version = ''
    //         this.versions = []
    //       }
    //     })
    //   } else {
    //     // this.$message.warning('模具编号不能为空')
    //     this.queryParam.version = ''
    //     this.versions = []
    //   }
    // },
    // // isVersions
    // isVersions(value){
    //   console.log('value',value);
    //   if (!value) {
    //     this.$message.warning('选择版本时模具编号不能为空')
    //   }
    // },
    // // moldCodeChange //清空时触发
    // moldCodeChange(){
    //   if (this.queryParam.moldCode == null || this.queryParam.moldCode == undefined || this.queryParam.moldCode == '') {
    //     this.queryParam.version = ''
    //     this.versions = []
    //   }
    // },
    // 材料搜索
    loadOptions() {
      
      // 转益模选项
      this.transferBenefitModelStatus = [
        {
          text: '已转',
          value: 2,
        },
        {
          text: '未转',
          value: 1,
        },
      ]

      // 材料选项
      this.materials = [
        {
          text: 'STD',
          value: 'STD',
        },
        {
          text: '非STD',
          value: '非STD',
        },
      ]
    },
    initDictConfig() {},
    getSuperFieldList() {
      // 高级搜索
      let fieldList = []
      fieldList.push({ type: 'string', value: 'serialNumber', text: '序号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'partName', text: '零件名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'chineseName', text: '中文名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'englishName', text: '英文名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'partSpecification', text: '零件规格', dictCode: '' })
      fieldList.push({ type: 'string', value: 'material', text: '材料', dictCode: '' })
      fieldList.push({ type: 'int', value: 'number', text: '数量', dictCode: '' })
      fieldList.push({ type: 'string', value: 'remark', text: '备注', dictCode: '' })
      fieldList.push({ type: 'int', value: 'bomStatus', text: 'bom状态（1.新增2.变更3.取消）', dictCode: '' })
      fieldList.push({
        type: 'int',
        value: 'transferBenefitModelStatus',
        text: '转益模的状态（1.未转2.已转）',
        dictCode: '',
      })
      fieldList.push({ type: 'int', value: 'isDelete', text: '是否删除（0.正常1.删除）', dictCode: '' })
      fieldList.push({ type: 'string', value: 'chDesignBomMasterId', text: '模具设计BOM主表id', dictCode: '' })
      this.superFieldList = fieldList
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>